<template>
	<view>
		<view class="block">
			<view class="cell">
				<view class="cell-title">铃音类型：</view>
				<view class="cell-content uni-flex">
					<view class="product-type" @click="ringTypeChange(1)" :class="ringType==1?'selected-type':''">视频</view>
					<view class="product-type" @click="ringTypeChange(2)" :class="ringType==2?'selected-type':''">音频</view>
				</view>
			</view>
		</view>
		<view class="block" style="padding:12rpx 30rpx;">
			<view class="cell cell-border">
				<view class="cell-title">运营商：</view>
				<view @click="selectYys" class="cell-content uni-flex align-center justify-between">
					<input type="text" :value="yysText" disabled="" placeholder="请选择" class="cell-input"/><uni-icons color="rgb(221,221,221)" type="forward" size="15"></uni-icons>
				</view>
			</view>
			<view class="cell cell-border">
				<view class="cell-title">铃音名称：</view>
				<view class="cell-content">
					<input type="text" placeholder="请输入铃音名称" @input="formChange($event,'ringname')" class="cell-input"/>
				</view>
			</view>
			<view class="cell cell-border">
				<view class="cell-title">铃音内容：</view>
				<view class="cell-content">
					<textarea placeholder="请输入铃音内容" placeholder-style="padding-top:10rpx" @input="formChange($event,'ringcontent')" class="cell-textarea"/>
					<!-- <input type="text" placeholder="请输入铃音内容"/> -->
				</view>
			</view>
			<view class="cell cell-border" v-if="groupType==2&&ringType==1">
				<view class="cell-title">视频文件：</view>
				<view class="cell-content">
					<view class="upload-btn" @click="uploadVideo">点击上传</view>
				</view>
			</view>
			<view class="cell cell-border">
				<view class="cell-title">音频文件：</view>
				<view class="cell-content uni-flex align-center justify-between">
					<view class="upload-btn" @click="uploadRing">点击上传</view><uni-icons @click="showRingDesc=true" type="info-filled" color="#5374F7" size="16"></uni-icons>
				</view>
			</view>
		</view>
		<view class="submit-btn" @click="submit">提交</view>
		<popup :show="showRingDesc" :showCloseBtn="true" title="说明" :stopClose="true" @closePopup="showRingDesc=false">
			<view style="padding-bottom: 20rpx;">
				<view class="ring-desc-para" v-for="item in ringDesc">{{item}}</view>
			</view>
		</popup>
		<uni-popup ref="popup" background-color="#fff">
			<view class="popup-content">
				<view class="yys-title">运营商</view>
				<radio-group :value="yys" @change="yysChange">
					<view class="yys-item flex">
						全部
						<radio color="#5374F7" checked="yys==''" value=""/>
					</view>
					<view class="yys-item flex">
						移动
						<radio color="#5374F7" checked="yys==2" value="2"/>
					</view>
					<view class="yys-item flex">
						联通
						<radio color="#5374F7" checked="yys==3"value="3" />
					</view>
					<view class="yys-item flex">
						电信
						<radio color="#5374F7" checked="yys==1" value="1" />
					</view>
				</radio-group>
				<view @click="confirmYys" class="confirm-btn">
					确定
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="message" type="message">
			<uni-popup-message :type="msgType" :message="messageText" :duration="2000"></uni-popup-message>
		</uni-popup>
	</view>
</template>

<script>
	import qs from 'qs'
	import {baseUrl,encryptDes} from '../../common/util.js'
	export default {
		data() {
			return {
				yys:'',
				groupType:1,
				ringType:1,
				yysText:'',
				showRingDesc:false,
				msgType:'error',
				messageText:'',
				ringDesc:['1.仅wav,mp3格式音频，时长≤48秒','2.移动 支持铃音文件和视频文件上传','3.铃音文件<1M，时长<48秒，格式需为mp3或wav','4.视频文件<40M，时长<48秒，格式需为mp4'],
				form:{
					circleid:'',
					phone_types:'',
					ringname:'',
					ringurl:'',
					ringcontent:'',
				}
			}
		},
		methods: {
			selectYys(){
				this.$refs.popup.open('bottom')
			},
			yysChange(e){
				this.yys=e.detail.value
			},
			confirmYys(){
				this.form.phone_types=this.yys
				this.yysText=this.yys==''?'全部':this.yys==1?'电信':this.yys==2?'移动':'联通'
				this.$refs.popup.close()
			},
			messageToggle(message) {
				this.messageText = message
				this.$refs.message.open()
			},
			submit(){
				if(!this.yysText){
					this.messageToggle('请选择运营商')
					return
				}
				if(!this.form.ringname){
					this.messageToggle('请填写铃音名称')
					return
				}
				if(!this.form.ringcontent){
					this.messageToggle('请填写铃音内容')
					return
				}
			},
			uploadFile(filePath,prop){
				var queryParams=qs.stringify({
					param: encryptDes(JSON.stringify({
						parampd: '',
						producttype: 'ring'
					})),
					login_name: 'xnhsmallpro'
				});
				uni.uploadFile({
					url: baseUrl + '/tools/btachUpload?'+queryParams,
					filePath:filePath,
					name:'file',
					header: {
						'Authorization': uni.getStorageSync("token"),
					},
				}).then(res=>{
					if(res.code == 0){
						if(res.objlist&&res.objlist[0]&&res.objlist[0].code==0){
							var path=res.objlist[0].uploadpath
						}else{
							uni.showToast({
								title: '上传失败',
								icon: "error",
								duration: 2000,
							});
						}
					}else {
						uni.showToast({
							title: res.msg,
							icon: "error",
							duration: 2000,
						});
					}
				}).catch(err=>{
					uni.showToast({
						title: '上传失败',
						icon: "error",
						duration: 2000,
					});
				})
			},
			uploadVideo(){
				wx.chooseVideo({
					sourceType:['album', 'camera'],
					compressed:false,
					success:res=>{
						var tempFilePath = res.tempFilePath
						this.uploadFile(tempFilePath,'vediourl')
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page{
		padding: 20rpx 30rpx 114rpx;
		.block{
			background-color: #fff;
			border-radius: 10rpx;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			&:nth-child(1){
				padding: 17rpx 30rpx;
			}
			&:last-child{
				margin-bottom: 0;
			}
			
			.cell{
				display: flex;
				padding: 13rpx 0;
				align-items: flex-start;
				.cell-title{
					width: 146rpx;
					flex-shrink: 0;
					text-align: right;
					font-size: 26rpx;
					height: 50rpx;
					line-height: 50rpx;
					color: #333;
				}
				.cell-content{
					min-height: 50rpx;
					line-height: 50rpx;
					flex-grow: 1;
					margin-left: 7rpx;
					.product-type{
						width: 120rpx;
						height: 50rpx;
						background: #fff;
						text-align: center;
						line-height: 48rpx;
						color: #666666;
						font-size: 26rpx;
						border: 1rpx solid #ddd;
						margin-right: 30rpx;
					}
					.selected-type{
						border: none;
						line-height: 50rpx;
						background-color: #5374F7;
						color: #fff;
					}
					.cell-input{
						font-size: 24rpx;
						height: 50rpx;
						color: #333;
					}
					.cell-textarea{
						width: 100%;
						height: 100rpx;
						font-size: 24rpx;
						line-height: 30rpx;
						margin-top: 10rpx;
					}
					.upload-btn{
						margin-left: 250rpx;
						width: 160rpx;
						height: 50rpx;
						background: #fff;
						border: 1px solid #5374F7;
						text-align: center;
						line-height: 48rpx;
						color: #5374F7;
						font-size: 24rpx;
					}
					
				}
			}
			.cell2{
				padding: 9rpx 0;
			}
			.cell-border{
				border-bottom: 1PX solid #ddd;
			}
		}
		.ring-desc-para{
			padding: 0 38rpx;
			font-size: 24rpx;
			line-height: 48rpx;
		}
		.popup-content{
			height: 526rpx;
			padding: 0 30rpx;
			.yys-title{
				line-height: 88rpx;
				font-size: 28rpx;
				color: #333;
				padding-left: 10rpx;
			}
			.yys-item{
				padding: 0 20rpx 0 10rpx;
				height: 87rpx;
				font-size: 26rpx;
				color: #333;
				border-top: 1PX solid #ddd;
				radio{
					color: #5374F7;
					transform: scale(0.7);
				}
			}
			.confirm-btn{
				width: 260rpx;
				height: 60rpx;
				line-height: 60rpx;
				background: #5374F7;
				border-radius: 30rpx;
				margin: 0 auto;
				font-size: 30rpx;
				text-align: center;
				color: #fff;
			}
		}
		.submit-btn{
			width: 100%;
			height: 98rpx;
			line-height: 98rpx;
			text-align: center;
			color: #5374F7;
			font-size: 30rpx;
			position: absolute;
			left: 0;
			bottom: 0;
			background-color: #fff;
		}
	}
	
</style>
